<template>
  <div class="algo-detail demand-detail">
    <detail class="algo-box">
    <h2 slot='detail-top' class="detail-top"><img src="~assets/images/分类小块@1x.png" alt=""> AI学习生态，学、练、用一体化</h2>
    <span slot="detail-left" class="detail-left">AI FORCE为用户建立集成编程环境、免费算力、开源算法、开发数据的学习与实训社区，为校园开发者提供比赛、交流、分享的平台，旨在打造一个学、练、用一体化的AI学习生态。</span>
    <span slot="detail-right" class="detail-right" @click="godemand"><span class="go">进入社区</span><img src="~assets/images/探索icon@1x.png" alt=""></span>
    </detail>
    <div class="demand-content">
      <div class="demand-part" style="margin-left:10%">
    <detail-item>
      <div class="demand-pic" slot="detail-pic"><img src="~assets/images/Rectangle_597@1x-2.png" alt="" ></div>
    </detail-item>
    <detail-item-item>
      <span slot="detail-2item-left"><p class="demand-datil-title">Faceunity人脸美颜特效SDK</p><p class="demand-detail-text">Faceunity基于人脸视频增强现实提供相关SDK</p></span>
      <span slot="detail-2item-right"><span class="goods">精品</span></span>
    </detail-item-item>
    </div>
    <div class="demand-part">
    <detail-item>
      <div class="demand-pic" slot="detail-pic"><img src="~assets/images/Rectangle_597@1x.png" alt="" ></div>
    </detail-item>
    <detail-item-item>
      <span slot="detail-2item-left"><p class="demand-datil-title">高尔夫球场遥控监测</p><p class="demand-detail-text">Faster R-CNN应用于高尔夫球场遥感检测</p></span>
      <span slot="detail-2item-right"><span class="goods">精品</span></span>
    </detail-item-item>
    </div>
    <div class="demand-part">
    <detail-item>
      <div class="demand-pic" slot="detail-pic"><img src="~assets/images/Rectangle_597@1x-1.png" alt="" ></div>
    </detail-item>
    <detail-item-item>
      <span slot="detail-2item-left"><p class="demand-datil-title">智能文本分析系统</p><p class="demand-detail-text">基于“软件+方法+模型”知识图谱服务体系打造</p></span>
      <span slot="detail-2item-right"><span class="goods">精品</span></span>
    </detail-item-item>
    </div>
    </div>
  </div>
</template>
<script>
import Detail from 'components/common/homepage/Detail.vue';
import DetailItem from 'components/common/homepage/DetailItem.vue';
import DetailItemItem from 'components/common/homepage/DetailItemItem.vue';

export default {
  name:'AlgorithmDetail',
  components:{
    Detail,
    DetailItem,
    DetailItemItem
  },
  methods:{
    godemand(){
      this.$router.push('/demand');
    }
  }
}
</script>

<style>
.goods{
  position: absolute;
  top: 5px;
  right: 10px;
  color: #fff;
  width: 52px;
  height: 22px;
  background-color: #F22BB2;
  border-radius: 12px;
  vertical-align: middle;
  text-align: center;
  line-height: 22px;
}
.algo-detail{
   height: 50rem;
  background-color: #18191F;
}
.algo-box{
  position: relative;
  top: 0;
  left:0;
  width: 50rem;
  height: 11.875rem;
  margin: 0 auto;
  padding-top: 8rem;
}
.algo-box h2{
  margin-bottom: 4rem;
}
.detail-top{
  display: flex;
  align-items: center;
  font-size: 20px;
  color: #fff;
}
.detail-top img{
  width: .875rem;
  height: 1.25rem;
  margin-right: .625rem;
}
.detail-left{
  font-size: 20px;
  text-align: left;
  width: 25rem;
  display: inline-block;
  margin-right: 12.5rem;
  color:#fff
}
.detail-right{
  position: absolute;
  bottom: -35%;
  right: 0;
  font-size: 18px;
  vertical-align: middle;
  display: inline-block;
  color:#fff
}
.detail-right img{
  vertical-align: middle;
  margin-left: .5rem;
}
.demand-detail{
  height: 55rem;
}

.demand-pic{
  width: 20rem;
  overflow: hidden;
}
.demand-pic img{
  width: 100%;
  vertical-align: middle;
  border-radius: 12px 12px 0px 0px;
  background-color: #fff;
}
.demand-content{
  display: flex;
  justify-content: center;
  width: 80rem;
  height: 15rem;
 margin: 18rem auto;
 
}
.demand-part{
  flex: 1;
}
.demand-datil-title{
  font-size: 15px;
  margin-top: 4px;
  color: #000;
}
.demand-detail-text{
  font-size: 12px;
  color: #474a57;
}
</style>